<template>
    <div>
        <a-input-number :min="1" v-model="data" style="width: 50%;margin-right:5px;"></a-input-number>
        <a-select v-model="unit" style="width: 40%">
            <a-select-option v-for="(item, index) in getUnits()" :key="index" :value="item.name">{{ item.label }}</a-select-option>
        </a-select>
    </div>
</template>

<script>
    export default {
        name: "FunnelWindow",
        props: {
            value: Number
        },
        data: function () {
            return {
                unit: 'day',
                data: 1
            }
        },
        computed: {
            seconds: function () {
                let seconds = 0;
                switch(this.unit) {
                    case 'second':
                        seconds = this.data;
                        break;
                    case 'minute':
                        seconds = this.data * 60;
                        break;
                    case 'hour':
                        seconds = this.data * 60 * 60;
                        break;
                    case 'day':
                        seconds = this.data * 24 * 60 * 60;
                        break;
                    case 'week':
                        seconds = this.data * 7 * 24 * 60 * 60;
                        break;
                }
                return seconds;
            }
        },
        methods: {
            getUnits: function () {
                return [
                    {
                        name: 'week',
                        label: '周',
                        seconds: 7 * 24 * 60 * 60
                    },
                    {
                        name: 'day',
                        label: '日',
                        seconds: 24 * 60 * 60
                    },
                    {
                        name: 'hour',
                        label: '时',
                        seconds: 60 * 60
                    },
                    {
                        name: 'minute',
                        label: '分',
                        seconds: 60
                    },
                    {
                        name: 'second',
                        label: '秒',
                        seconds: 1
                    },
                ];
            },
            getInitValue: function () {
                for(let i = 0; i < this.getUnits().length; i++) {
                    if(this.value % this.getUnits()[i].seconds === 0) {
                        this.unit = this.getUnits()[i].name;
                        this.data = this.value / this.getUnits()[i].seconds;
                        break;
                    }
                }
            }
        },
        watch: {
            value(value) {
                this.getInitValue();
            },
            seconds: function (now, before) {
                const newValue = JSON.stringify(now);
                const oldValue = JSON.stringify(before);
                if(newValue !== oldValue) {
                    this.$emit('input', now);
                }
            }
        },
        mounted() {
            this.getInitValue();
        }
    }
</script>

<style scoped>

</style>